<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Issue_G</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./js/echarts/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/cookie.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/example-bundle.js"></script>
    <script src="js/world.js"></script>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国与东盟十国合作关系</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/issue_A.html">与东盟十国合作态势变化（年份-学科）<span class="sr-only">(current)</span></a></li>
                <li><a href="/issue_B.html">与东盟十国的合作态势（年份-国家）</a></li>
                <li><a href="/issue_C.html">与东盟十国的合作态势（地图）</a></li>
                <li><a href="/issue_D.html">发文机构占比</a></li>
                <li class="active"><a href="/issue_G.html">各东盟在核心领域的作者</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app">
    <div id="china" class="item"></div>
    <div id="brunei" class="item"></div>
    <div id="cambodia" class="item"></div>
    <div id="indonesia" class="item"></div>
    <div id="laos" class="item"></div>
    <div id="malaysia" class="item"></div>
    <div id="myanmar" class="item"></div>
    <div id="philippines" class="item"></div>
    <div id="singapore" class="item"></div>
    <div id="thailand" class="item"></div>
    <div id="vietnam" class="item"></div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            issue_g: {
                d: {},
                brunei: {},
                cambodia: {},
                indonesia: {},
                laos: {},
                malaysia: {},
                myanmar: {},
                china: {},
                philippines: {},
                singapore: {},
                vietnam: {},
                thailand: {},
            }
        },
        methods: {
            req: async function (addr) {
                let e = await reqXXX(addr, this.issue_g);
                let obj = JSON.parse(e.currentTarget.responseText);
                this.issue_g.d = obj;
                this.initAll();
            },
            initAll: function () {
                this.initSunburst(this.issue_g.brunei, document.getElementById("brunei"), this.issue_g.d.Brunei,"Brunei");
                this.initSunburst(this.issue_g.cambodia, document.getElementById("cambodia"), this.issue_g.d.Cambodia,"Cambodia");
                this.initSunburst(this.issue_g.indonesia, document.getElementById("indonesia"), this.issue_g.d.Indonesia,"Indonesia");
                this.initSunburst(this.issue_g.laos, document.getElementById("laos"), this.issue_g.d.Laos,"Laos");
                this.initSunburst(this.issue_g.malaysia, document.getElementById("malaysia"), this.issue_g.d.Malaysia,"Malaysia");
                this.initSunburst(this.issue_g.myanmar, document.getElementById("myanmar"), this.issue_g.d.Myanmar,"Myanmar");
                this.initSunburst(this.issue_g.china, document.getElementById("china"), this.issue_g.d.China,"China");
                this.initSunburst(this.issue_g.philippines, document.getElementById("philippines"), this.issue_g.d.Philippines,"Philippines");
                this.initSunburst(this.issue_g.singapore, document.getElementById("singapore"), this.issue_g.d.Singapore,"Singapore");
                this.initSunburst(this.issue_g.vietnam, document.getElementById("vietnam"), this.issue_g.d.Vietnam,"Vietnam");
                this.initSunburst(this.issue_g.thailand, document.getElementById("thailand"), this.issue_g.d.Thailand,"Thailand");
            },
            initSunburst: function (target, element, data,title) {
                data = this.transfer(data);//使数据合法化
                target.eChart = echarts.init(element);
                target.eChart.setOption({
                    title: {
                        text: title,
                        left: '300',
                        textStyle: {
                            color: "#777",
                            fontSize: 24
                        }
                    },
                    tooltip: {
                        data: [],
                    },
                    legend: {
                        orient: 'vertical',
                        type: "scroll",
                        selected: [],
                        left: 'auto',
                        padding: [0, 50, 0, 0]
                    },
                    series: {
                        // name:"xx",
                        type: "sunburst",
                        data: data,
                        radius: [0, '90%'],
                        levels: [{}, {
                            r0: '10%',
                            r: '50%',
                            label: {
                                align: 'right',
                                // rotate: 'tangential'
                                rotate: 'radial'
                            }
                        }, {
                            r0: '80%',
                            r: '70%',
                            label: {
                                position: 'outside',
                                //rotate: 'tangential'
                                rotate: 'radial',
                            }
                        }]

                    },
                    toolbox: {
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                type: ['stack', 'tiled', 'line', 'bar'],
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },

                });
            },

            transfer: function (data) {
                let res = [];
                for (let item of data) {
                    let color = function () {
                        // Random color
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }()
                    let childs = [];
                    for (let e of item.subjects) {
                        childs.push({
                            name: e.key,
                            value: e.value,
                            itemStyle: {color: color}
                        });
                    }
                    res.push({
                        value: item.count,
                        itemStyle: {color: color},
                        children: childs,
                        name: item.name
                    });
                }
                //console.log(res);
                return res;
            }
        },
        computed: {},
        mounted: function () {
            console.log("mounted!");
            this.req("/issue_g");

        }

    });
</script>
</html>